<template>
  <div class="container topic">
    <Card>
      <el-page-header @back="goBack()" title="返回" :content="barTitle"/>
    </Card>
    <Card>
      <el-input v-model="title" placeholder="标题"></el-input>
    </Card>

    <AskUserInfo :user="askUserInfo" v-if="askUserInfo"/>

    <Card v-loading="loading">
      <markdown-editor v-model="content"></markdown-editor>
      <div class="action">
        <el-select v-model="nodeId" placeholder="选择分类">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button :disabled="loading" type="primary" :icon="loading?'el-icon-loading':'el-icon-position'"
                   style="margin-left: 10px;" @click="post()">发布
        </el-button>
      </div>
    </Card>
  </div>
</template>

<script>
import api from "@/utils/api";

export default {
  name: "topic",
  layout: "base",
  middleware: 'auth',
  data() {
    return {
      //存在id的情况下就是修改，修改只能自己和管理员
      id: this.$route.params.id,
      title: '',
      content: '',
      nodeId: '',
      options: [],
      loading: false,
      userId: null,
      askUserInfo: null
    }
  },
  async asyncData({params, store, error}) {

    //如果提问的用户id和当前登录用户id一致的时候就报错
    if (store.state.user.id === parseInt(params.userId)) {
      return error({message: '非法请求，不能向自己提问！', statusCode: 403});
    }

    return {
      userId: params.userId
    }
  },
  created() {
    this.getCategory();
    //加载用户信息
    this.getAskUserInfo();
  },
  head() {
    return {
      title: this.barTitle
    }
  },
  computed: {
    barTitle() {
      return this.id ? "编辑" : '发布帖子';
    }
  },
  methods: {
    getAskUserInfo() {
      if (!this.userId) {
        return;
      }
      let self = this;
      api.getUserDetail(this.userId).then(res => {
        self.askUserInfo = res;
      });
    },
    goBack() {
      this.$router.push({name: 'index'});
    },
    getTopic() {
      if (this.id) {
        api.getTopicEditData(this.id).then(res => {
          this.title = res.title;
          this.content = res.content;
          this.nodeId = res.nodeId;
        }).finally(() => this.loading = false);
      } else {
        this.loading = false;
      }
    },
    getCategory(data) {
      this.loading = true;
      api.getCategory(data).then(res => {
        this.options = res;
        if (res) {
          this.nodeId = res[0].id;
        }
        this.getTopic();
      });
    },
    post() {
      //服务端校验
      let self = this;
      self.loading = true;
      api.postTopic(this.id, this.title, this.content, this.nodeId, this.userId).then(res => {
        self.loading = false;
        if (res.code === 1) {
          this.$message.success('发布成功');
          this.$router.push({
            name: 'topic-id',
            params: {
              id: res.id
            }
          });
        } else {
          this.$message.error(res.message);
        }
      }).finally(() => self.loading = false);
    }
  }
}
</script>

<style scoped lang="less">
.topic {
  margin-top: 10px;
}

.action {
  margin-top: 10px;
}

</style>
